<template>
  <div class="app-container home">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistics-row">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card class="statistics-card">
          <div class="statistics-content">
            <div class="statistics-icon user-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="statistics-info">
              <div class="statistics-number">{{ statistics.userCount }}</div>
              <div class="statistics-label">{{ $t('dashboard.totalUsers') }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card class="statistics-card">
          <div class="statistics-content">
            <div class="statistics-icon course-icon">
              <i class="el-icon-reading"></i>
            </div>
            <div class="statistics-info">
              <div class="statistics-number">{{ statistics.courseCount }}</div>
              <div class="statistics-label">{{ $t('dashboard.totalCourses') }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card class="statistics-card">
          <div class="statistics-content">
            <div class="statistics-icon training-icon">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="statistics-info">
              <div class="statistics-number">{{ statistics.trainingCount }}</div>
              <div class="statistics-label">{{ $t('dashboard.totalTrainings') }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card class="statistics-card">
          <div class="statistics-content">
            <div class="statistics-icon completion-icon">
              <i class="el-icon-s-check"></i>
            </div>
            <div class="statistics-info">
              <div class="statistics-number">{{ statistics.completionRate }}%</div>
              <div class="statistics-label">{{ $t('dashboard.completionRate') }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 左侧：快捷操作和最近活动 -->
      <el-col :xs="24" :lg="16">
        <!-- 快捷操作 -->
        <el-card class="quick-actions-card">
          <div slot="header" class="clearfix">
            <span>{{ $t('dashboard.quickActions') }}</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8" v-for="action in quickActions" :key="action.key">
              <div class="quick-action-item" @click="handleQuickAction(action)">
                <div class="action-icon" :class="action.iconClass">
                  <i :class="action.icon"></i>
                </div>
                <div class="action-title">{{ action.title }}</div>
                <div class="action-desc">{{ action.description }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 最近活动 -->
        <el-card class="recent-activities-card">
          <div slot="header" class="clearfix">
            <span>{{ $t('dashboard.recentActivities') }}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="viewAllActivities">
              {{ $t('common.viewAll') }}
            </el-button>
          </div>
          <div class="activity-list">
            <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
              <div class="activity-icon" :class="activity.type">
                <i :class="activity.icon"></i>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧：系统信息和通知 -->
      <el-col :xs="24" :lg="8">
        <!-- 系统信息 -->
        <el-card class="system-info-card">
          <div slot="header" class="clearfix">
            <span>{{ $t('dashboard.systemInfo') }}</span>
          </div>
          <div class="system-info">
            <div class="info-item">
              <span class="info-label">{{ $t('dashboard.systemName') }}:</span>
              <span class="info-value">VOTS Training Management System</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ $t('dashboard.version') }}:</span>
              <span class="info-value">v{{ version }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ $t('dashboard.lastUpdate') }}:</span>
              <span class="info-value">{{ lastUpdate }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ $t('dashboard.serverStatus') }}:</span>
              <el-tag type="success">{{ $t('dashboard.online') }}</el-tag>
            </div>
          </div>
        </el-card>

        <!-- 通知公告 -->
        <el-card class="notifications-card">
          <div slot="header" class="clearfix">
            <span>{{ $t('dashboard.notifications') }}</span>
          </div>
          <div class="notification-list">
            <div v-for="notification in notifications" :key="notification.id" class="notification-item">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-time">{{ notification.time }}</div>
            </div>
          </div>
        </el-card>

        <!-- 帮助链接 -->
        <el-card class="help-links-card">
          <div slot="header" class="clearfix">
            <span>{{ $t('dashboard.helpLinks') }}</span>
          </div>
          <div class="help-links">
            <el-button type="text" icon="el-icon-question" @click="openHelp">
              {{ $t('dashboard.userGuide') }}
            </el-button>
            <el-button type="text" icon="el-icon-document" @click="openApiDocs">
              {{ $t('dashboard.apiDocs') }}
            </el-button>
            <el-button type="text" icon="el-icon-service" @click="contactSupport">
              {{ $t('dashboard.contactSupport') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDashboardStatistics } from '@/api/dashboard'

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0",
      // 统计数据
      statistics: {
        userCount: 0,
        courseCount: 0,
        trainingCount: 0,
        completionRate: 0
      },
      // 快捷操作
      quickActions: [
        {
          key: 'addUser',
          title: this.$t('dashboard.addUser'),
          description: this.$t('dashboard.addUserDesc'),
          icon: 'el-icon-user-solid',
          iconClass: 'user-action',
          path: '/system/user'
        },
        {
          key: 'createCourse',
          title: this.$t('dashboard.createCourse'),
          description: this.$t('dashboard.createCourseDesc'),
          icon: 'el-icon-reading',
          iconClass: 'course-action',
          path: '/course/course'
        },
        {
          key: 'scheduleTraining',
          title: this.$t('dashboard.scheduleTraining'),
          description: this.$t('dashboard.scheduleTrainingDesc'),
          icon: 'el-icon-s-order',
          iconClass: 'training-action',
          path: '/training/training'
        },
        {
          key: 'viewReports',
          title: this.$t('dashboard.viewReports'),
          description: this.$t('dashboard.viewReportsDesc'),
          icon: 'el-icon-s-data',
          iconClass: 'report-action',
          path: '/system/report'
        },
        {
          key: 'manageRoles',
          title: this.$t('dashboard.manageRoles'),
          description: this.$t('dashboard.manageRolesDesc'),
          icon: 'el-icon-s-check',
          iconClass: 'role-action',
          path: '/system/role'
        },
        {
          key: 'systemSettings',
          title: this.$t('dashboard.systemSettings'),
          description: this.$t('dashboard.systemSettingsDesc'),
          icon: 'el-icon-setting',
          iconClass: 'setting-action',
          path: '/system/config'
        }
      ],
      // 最近活动
      recentActivities: [
        {
          id: 1,
          type: 'user',
          icon: 'el-icon-user',
          title: this.$t('dashboard.activity.userAdded'),
          time: '2 minutes ago'
        },
        {
          id: 2,
          type: 'course',
          icon: 'el-icon-reading',
          title: this.$t('dashboard.activity.courseCreated'),
          time: '15 minutes ago'
        },
        {
          id: 3,
          type: 'training',
          icon: 'el-icon-s-order',
          title: this.$t('dashboard.activity.trainingScheduled'),
          time: '1 hour ago'
        },
        {
          id: 4,
          type: 'completion',
          icon: 'el-icon-s-check',
          title: this.$t('dashboard.activity.trainingCompleted'),
          time: '2 hours ago'
        },
        {
          id: 5,
          type: 'system',
          icon: 'el-icon-setting',
          title: this.$t('dashboard.activity.systemUpdated'),
          time: '1 day ago'
        }
      ],
      // 通知公告
      notifications: [
        {
          id: 1,
          title: this.$t('dashboard.notification.systemMaintenance'),
          time: '2024-01-15'
        },
        {
          id: 2,
          title: this.$t('dashboard.notification.newFeature'),
          time: '2024-01-10'
        },
        {
          id: 3,
          title: this.$t('dashboard.notification.trainingReminder'),
          time: '2024-01-08'
        }
      ],
      // 最后更新时间
      lastUpdate: '2024-01-15 10:30:00'
    }
  },
  created() {
    this.loadStatistics()
  },
  watch: {
    '$i18n.locale': {
      handler() {
        // 语言切换时重新加载数据
        this.loadStatistics()
      },
      immediate: false
    }
  },
  mounted() {
    // 监听全局语言变化事件
    this.$root.$on('language-changed', (lang) => {
      console.log('Language changed event received:', lang)
      // 强制更新组件
      this.$forceUpdate()
    })
  },
  methods: {
    // 加载统计数据
    async loadStatistics() {
      try {
        const response = await getDashboardStatistics()
        if (response.code === 200) {
          this.statistics = response.data
        }
      } catch (error) {
        console.error('Failed to load dashboard statistics:', error)
      }
    },
    // 处理快捷操作
    handleQuickAction(action) {
      this.$router.push(action.path);
    },
    // 查看所有活动
    viewAllActivities() {
      this.$message.info(this.$t('dashboard.viewAllActivitiesMsg'));
    },
    // 打开帮助
    openHelp() {
      this.$message.info(this.$t('dashboard.helpMsg'));
    },
    // 打开API文档
    openApiDocs() {
      this.$message.info(this.$t('dashboard.apiDocsMsg'));
    },
    // 联系支持
    contactSupport() {
      this.$message.info(this.$t('dashboard.contactSupportMsg'));
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  .statistics-row {
    margin-bottom: 20px;
  }

  .statistics-card {
    .statistics-content {
      display: flex;
      align-items: center;
      padding: 10px 0;

      .statistics-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-size: 24px;
        color: white;

        &.user-icon {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        &.course-icon {
          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        &.training-icon {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        &.completion-icon {
          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
      }

      .statistics-info {
        flex: 1;

        .statistics-number {
          font-size: 28px;
          font-weight: bold;
          color: #303133;
          line-height: 1;
        }

        .statistics-label {
          font-size: 14px;
          color: #909399;
          margin-top: 5px;
        }
      }
    }
  }

  .main-content {
    .quick-actions-card {
      margin-bottom: 20px;

      .quick-action-item {
        text-align: center;
        padding: 20px 10px;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          background-color: #f5f7fa;
          transform: translateY(-2px);
        }

        .action-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 10px;
          font-size: 20px;
          color: white;

          &.user-action {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.course-action {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.training-action {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }

          &.report-action {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
          }

          &.role-action {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
          }

          &.setting-action {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
          }
        }

        .action-title {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 5px;
        }

        .action-desc {
          font-size: 12px;
          color: #909399;
          line-height: 1.4;
        }
      }
    }

    .recent-activities-card {
      margin-bottom: 20px;

      .activity-list {
        .activity-item {
          display: flex;
          align-items: center;
          padding: 15px 0;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 16px;
            color: white;

            &.user {
              background-color: #409eff;
            }

            &.course {
              background-color: #67c23a;
            }

            &.training {
              background-color: #e6a23c;
            }

            &.completion {
              background-color: #f56c6c;
            }

            &.system {
              background-color: #909399;
            }
          }

          .activity-content {
            flex: 1;

            .activity-title {
              font-size: 14px;
              color: #303133;
              margin-bottom: 5px;
            }

            .activity-time {
              font-size: 12px;
              color: #909399;
            }
          }
        }
      }
    }

    .system-info-card {
      margin-bottom: 20px;

      .system-info {
        .info-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          .info-label {
            font-size: 14px;
            color: #606266;
          }

          .info-value {
            font-size: 14px;
            color: #303133;
            font-weight: 500;
          }
        }
      }
    }

    .notifications-card {
      margin-bottom: 20px;

      .notification-list {
        .notification-item {
          padding: 10px 0;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          .notification-title {
            font-size: 14px;
            color: #303133;
            margin-bottom: 5px;
            line-height: 1.4;
          }

          .notification-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }

    .help-links-card {
      .help-links {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .el-button {
          text-align: left;
          padding: 10px 0;
          border: none;
          color: #409eff;

          &:hover {
            color: #66b1ff;
            background-color: transparent;
          }
        }
      }
    }
  }
}
</style>

